import React, { Component } from 'react'
import "./App.css";
import axios from "axios"
import "./mock/index"
import { Movie } from "./types/index"
import quickSort from "./util/quickSort"
interface IState {
  list: Movie[],
  type: string,
  target: number,
  total: number
}

interface IProps {

}
export class App extends Component<IProps, IState> {
  componentDidMount() {
    if (this.state.list.length === 0) {
      axios.get('/api/list').then(res => {
        console.log(res)
        //刚进入页面计算 票房
        this.totalFun(res.data.data.list)
        this.setState({
          list: quickSort<Movie>(res.data.data.list),
        })
      })
    }
  }
  state = {
    list: [],
    type: 'zong',
    target: -1,
    total: 0
  }
  totalFun = (data: Movie[]) => {
    let { type } = this.state;
    console.log(type, '=================')
    let total = data.reduce((pre: number, cur: Movie) => {
      if (type === 'zong') {
        return pre + cur.zTotal
      } else {
        return pre + cur.fTotal
      }
    }, 0)
    this.setState({
      total
    })

  }
  //分账
  change = () => {
    this.setState({
      type: "",
    }, () => {
      this.totalFun(this.state.list)
    })
  }
  //综合
  changer = () => {
    this.setState({
      type: "zong",
    }, () => {
      this.totalFun(this.state.list)
    })
  }
  render() {
    let { list, type, target } = this.state;
    let list1 = list.filter((item: Movie) => item.isShow)
    let list2 = list.filter((item: Movie) => !item.isShow)
    let targetObj:any = target != -1 &&list[target]
    console.log(targetObj)
    return (
      <div className="App">
        <div className="left">
          <button className={type === 'zong' ? "active" : ""} onClick={this.changer}>综合票房</button>
          <button className={type === '' ? "active" : ""} onClick={this.change}>分账票房</button>
          <span>总票房：{this.state.total}</span>
    <span>喜欢：{targetObj.name}</span>
        </div>
        <div className="right">
          {<div>
            <table>
              <thead>
                <tr>
                  <td>

                  </td>
                  <td>
                    影片
                  </td>
                  <td>
                    {type === 'zong' ? '综合票房' : "分账票房"}
                  </td>
                  <td>
                    票房占比
                  </td>
                  <td>
                    排片场次
                  </td>
                  <td>
                    拍片占比
                  </td>
                  <td>
                    场均人次
                  </td>
                </tr>
              </thead>
              <tbody>
                {
                  list.length && [...list1, ...list2].map((item: Movie) => <tr key={item.id}>
                    <td className={target === item.id ? "att" : ""} onClick={() => {
                      if(target === -1){
                        item.isShow = true;
                        this.setState({
                            target:item.id
                        })
                    }else if(target === item.id){
                        item.isShow = false;
                        this.setState({
                            target:-1
                        })
                    }

                    }}>
                      ★
                  </td>
                    <td>
                      <h4>{item.name}</h4>
                    </td>
                    <td>
                      <span>{type === "zong" ? item.zTotal : item.fTotal}</span>
                    </td>
                    <td>
                      <span>{item.zoffice}</span>
                    </td>
                    <td>
                      <span>{item.zProportion}</span>
                    </td>
                    <td>
                      <span>{item.foffice}</span>
                    </td>
                    <td>
                      <span>{item.fProportion}</span>
                    </td>
                  </tr>)
                }
              </tbody>
            </table>
          </div>
          }
        </div>
      </div>
    )
  }
}

export default App
